<template>
    <div class="poster-list">
        <h1 class="title">海贼王海报</h1>
        <van-grid :border="false" :column-num="3">
            <van-grid-item v-for="poster in posters" :key="poster.id">
                <van-image :src="poster.cover" />
                <h2>{{ poster.title }}</h2>
            </van-grid-item>
        </van-grid>
    </div>
</template>

  
<script>
import { mapState } from 'vuex'

export default {
    computed: {
        ...mapState(['posters'])
    }
}
</script>

<style scoped>
.poster-list {
    /* 背景图片 */
    background-image: url('https://img.phb123.com/uploads/allimg/161126/16-1611261K429347.gif');
    padding: 20px;


}

.title {
    /* 标题居中 */
    text-align: center;
}

.grid-demo {
    background-color: transparent;
}

.van-grid-item__content {
    background-color: transparent !important;
}
</style>
